<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>

    <style>
        body{
            background-image: url("/img/banner_team.jpg");
            background-position: center;
        }
        .mt-60{
            margin-top: 60px;
        }
        .mt-120{
            margin-top: 120px;
        }
        .mb-60{
            margin-bottom: 60px;
        }
        .mb-120{
            margin-bottom: 120px;
        }
        .content {
            z-index: 1;
        }
        .content:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255,255,255,0.8);
            z-index: -1;
            background-image: url("/img/banner_team.jpg");
            background-position: center top;
            background-size: cover;
            background-attachment: fixed;
            -webkit-filter: blur(20px);
            -moz-filter: blur(20px);
            -ms-filter: blur(20px);
            -o-filter: blur(20px);
            filter: blur(20px);
        }
        .content-deep{
            z-index: 1;
        }
        .content-deep:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.9);
            z-index: -1;
            background-position: center top;
            background-size: cover;
            background-attachment: fixed;
        }
        .h-center{
            margin: 0 auto;
        }
        #myTabDiv{
            z-index: 2;
            position: fixed;
            width: 100%;
            height: 42px;
        }
        #myTabContentDiv{
            z-index: 1;
            position: absolute;
            top: 42px;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<div id="myTabDiv">
    <ul class="nav nav-tabs content-deep" id="myTab" role="tablist" style="position: relative;width: 100%">
        <a href="javascript:void(0);" style="height: 42px;" class="ml-2" id="showActionBar">
            <i id="showActionBarIcon" class="fa fa-chevron-circle-down fa-2x m-1" aria-hidden="true" style="display: none"></i>
            <i id="hideActionBarIcon" class="fa fa-chevron-circle-right fa-2x m-1" aria-hidden="true" style=""></i>
        </a>

        <li class="nav-item">
            <a class="nav-link" id="myFileTab" data-toggle="tab" href="#myFilePanel" role="tab" aria-controls="createTeam" aria-selected="true">我的文件</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" id="createTeamTab" data-toggle="tab" href="#createTeamPanel" role="tab" aria-controls="createTeam" aria-selected="true">小组1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="joinTeamTab" data-toggle="tab" href="#joinTeamPanel" role="tab" aria-controls="joinTeam" aria-selected="false">小组2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="myTeamTab" data-toggle="tab" href="#myTeamPanel" role="tab" aria-controls="myTeam" aria-selected="false">小组3</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="createdTeamTab" data-toggle="tab" href="#createdTeamPanel" role="tab" aria-controls="createdTeam" aria-selected="false">小组4</a>
        </li>
    </ul>
</div>

<div class="tab-content" id="myTabContentDiv">
    <div id="actionBar" style="display: none">
        <div class="row m-2 mt-3">
            <button type="button" class="btn btn-outline-primary ml-2">上传</button>
            <button type="button" class="btn btn-outline-warning ml-2">新建文件夹</button>
        </div>

        <div class="row m-2" style="font-size: 13px">
            <a href="" class="ml-2">返回上一层</a>
            <span class="mx-2">|</span>
            <a href="">全部文件</a>
        </div>
    </div>
    <div class="tab-pane fade show active " id="myFilePanel" role="tabpanel" aria-labelledby=myFileTab>

        <table class="table">
            <thead>
            <tr>
                <th scope="col">文件名</th>
                <th scope="col">大小</th>
                <th scope="col">修改日期</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>

            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="tab-pane fade " id="joinTeamPanel" role="tabpanel" aria-labelledby="joinTeamTab">
        <table class="table">
            <thead>
            <tr>
                <th scope="col">文件名</th>
                <th scope="col">大小</th>
                <th scope="col">修改日期</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>

            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="tab-pane fade " id="myTeamPanel" role="tabpanel" aria-labelledby="myTeamTab">
        <table class="table">
            <thead>
            <tr>
                <th scope="col">文件名</th>
                <th scope="col">大小</th>
                <th scope="col">修改日期</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>

            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="tab-pane fade" id="createdTeamPanel" role="tabpanel" aria-labelledby="createdTeamTab">
        <table class="table">
            <thead>
            <tr>
                <th scope="col">文件名</th>
                <th scope="col">大小</th>
                <th scope="col">修改日期</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>

            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

    <script>
        $(document).ready(function () {
            var isActionBarShow = false;

            $("#showActionBar").click(function () {

                if (isActionBarShow) {
                    $("#actionBar").hide(500);
                    $("#showActionBarIcon").hide();
                    $("#hideActionBarIcon").show();
                    isActionBarShow = false;
                }else{
                    $("#actionBar").show(500);
                    $("#showActionBarIcon").show();
                    $("#hideActionBarIcon").hide();
                    isActionBarShow  = true;
                }

            })

        })
    </script>
</body>
</html>